<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品列表</title>
  <script src="asserts/plugins/jquery/jquery-3.6.0.min.js"></script>
  <script src="asserts/plugins/bootstrap/js/bootstrap.js"></script>
  <link href="asserts/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
  <script>
    $(document).ready(function () {
      $('#search').on('click', function () {
        var name = $('input[name="name"]').val();
        var pubdate = $('input[name="pubdate"]').val();
        searchGoods(name, pubdate);
      });
      searchGoods('', '');
    });

    // 搜索商品
    function searchGoods(name, pubdate) {
      $.ajax({
        url: '/admin/GoodsTypeController',
        data: {
          type: 'searchGoods',
          name: name,
          pubdate: pubdate
        },
        method: 'GET',
        dataType: 'json',
        success: function (respResult) {
          if (respResult && respResult.status === 500) {
            alert("搜索失败");
          } else if (respResult && respResult.status === 200) {
            renderGoods(respResult.data);
          } else {
            alert("服务器出现错误");
          }
        },
        error: function (xhr, status, error) {
          console.log("AJAX Error: " + status + ": " + error);
        }
      });
    }

    // 格式化时间戳为日期时间字符串
    function formatDate(timestamp) {
      var date = new Date(timestamp);
      return date.toLocaleString(); // 可根据需要调整日期时间格式
    }

    // 渲染商品列表
    function renderGoods(goodsList) {
      let tbody = '';
      for (let i = 0; i < goodsList.length; i++) {
        tbody += `<tr>
                <td>${goodsList[i].pId}</td>
                <td>${goodsList[i].pName}</td>
                <td>${formatDate(goodsList[i].pTime)}</td>
                <td>${goodsList[i].pPrice}</td>
                <td>
                  <button class='btn btn-danger btn-xs' onclick='deleteProduct(${goodsList[i].pId})'>删除</button>
                  <button class='btn btn-warning btn-xs' onclick='editProduct(${goodsList[i].pId})'>修改</button>
                  <button class='btn btn-primary btn-xs' onclick='getProductInfo(${goodsList[i].pId})'>描述</button>
                </td>
              </tr>`;
      }
      $('#tb_list tbody').html(tbody);
    }

    function deleteProduct(productId) {
      if (confirm('确定要删除这个商品吗？')) {
        $.ajax({
          url: '/admin/GoodsTypeController',
          method: 'POST',
          dataType: 'json',
          data: {
            type: 'deleteGoods',
            pId: productId
          },
          success: function(respResult) {
            if (respResult && respResult.status === 200) {
              alert("删除成功");
              searchGoods('', ''); // 删除成功后刷新商品列表
            } else {
              alert("删除失败: " + respResult.message);
            }
          },
          error: function(xhr, status, error) {
            console.log("AJAX Error: " + status + ": " + error);
            alert("删除失败: 网络或服务器错误");
          }
        });
      }
    }

    // 修改商品
    function editProduct(productId) {
      $('#editModal').modal('show');
      $('#editForm').off('submit').on('submit', function(e) {
        e.preventDefault();
        var updateData = {
          type: 'updateGoods',
          pId: productId,
          pName: $('#editName').val(),
          pPrice: $('#editPrice').val(),
          pTime: $('#editTime').val(),
          pInfo: $('#editInfo').val(),
        };
        $.ajax({
          url: '/admin/GoodsTypeController',
          method: 'POST',
          data: updateData,
          success: function(respResult) {
            if (respResult && respResult.status === 200) {
              alert("更新成功");
              $('#editModal').modal('hide');
              searchGoods('', '');
            } else {
              alert("更新失败: " + respResult.message);
            }
          },
          error: function(xhr, status, error) {
            console.log("AJAX Error: " + status + ": " + error);
            alert("更新失败: 网络或服务器错误");
          }
        });
      });
    }



    // 获取商品描述
    function getProductInfo(productId) {
      $.ajax({
        url: '/admin/GoodsTypeController',
        method: 'GET',
        dataType: 'json',
        data: {
          type: 'getGoodsInfo',
          pId: productId
        },
        success: function(respResult) {
          if (respResult && respResult.status === 200) {
            $('#productDescription').text(respResult.data);
            $('#descriptionModal').modal('show');
          } else {
            alert("获取描述信息失败: " + respResult.message);
          }
        },
        error: function(xhr, status, error) {
          console.log("AJAX Error: " + status + ": " + error);
          alert("获取描述失败:网络或服务器错误");
        }
      });
    }
  </script>
</head>
<body>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">商品列表</div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-5">
          <div class="form-group form-inline">
            <span>商品名称</span>
            <input type="text" name="name" class="form-control">
          </div>
        </div>
        <div class="col-md-5">
          <div class="form-group form-inline">
            <span>上架时间</span>
            <input type="text" readonly="readonly" name="pubdate" class="form-control">
          </div>
        </div>
        <div class="col-md-2">
          <button type="button" class="btn btn-primary" id="search"><span class="glyphicon glyphicon-search"></span></button>
        </div>
      </div>
      <div style="height: 400px; overflow: scroll;">
        <table id="tb_list" class="table table-striped table-hover table-bordered">
          <thead>
          <tr>
            <th>序号</th>
            <th>商品名称</th>
            <th>上架时间</th>
            <th>价格</th>
            <th>类型</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="editModalLabel">编辑商品</h4>
      </div>
      <div class="modal-body">
        <form id="editForm">
          <div class="form-group">
            <label for="editName">商品名称</label>
            <input type="text" class="form-control" id="editName">
          </div>
          <div class="form-group">
            <label for="editPrice">价格</label>
            <input type="text" class="form-control" id="editPrice">
          </div>
          <div class="form-group">
            <label for="editTime">上架时间</label>
            <input type="text" class="form-control" id="editTime">
          </div>
          <div class="form-group">
            <label for="editInfo">描述</label>
            <textarea class="form-control" id="editInfo"></textarea>
          </div>
          <div class="form-group">
            <label for="editType">类型</label>
            <input type="text" class="form-control" id="editType">
          </div>
          <button type="submit" class="btn btn-primary">保存更改</button>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="descriptionModal" tabindex="-1" role="dialog" aria-labelledby="descriptionModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="descriptionModalLabel">商品描述</h4>
      </div>
      <div class="modal-body">
        <p id="productDescription"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

